<template>
  <div class="regiestManage-container" v-loading="loading">
    <h3 class="regiestManage-container__title">同IP注册限制</h3>
    <el-switch
      v-if="roleCheck('on-off')"
      v-model="onOff"
      active-color="#409eff"
      inactive-color="#dcdfe6"
      active-text="开启"
      inactive-text="关闭"
      active-value="1"
      inactive-value="0"
      @change="handleChange">
    </el-switch>
    <el-form :model="form" ref="form" :rules="rules" >
      <el-form-item label="时间（分钟内）" prop="minutes" :rules="rules.minutes">
        <el-input v-model.number="form.minutes" maxlength='10' ></el-input>分
      </el-form-item>
      <el-form-item label="分钟注册账户数量" prop="minutesCount" :rules="rules.minutesCount" >
        <el-input  v-model.number="form.minutesCount" maxlength='10'></el-input>个
      </el-form-item>
      <el-form-item label="天注册账户数量" prop="dayCount" :rules="rules.dayCount">
        <el-input v-model.number="form.dayCount" maxlength='10'></el-input>个
      </el-form-item>
    </el-form>
    <el-button type="primary" size="medium" @click="onSave" v-if="roleCheck('save')">保存</el-button>
    <hr/>
    <h3 class="regiestManage-container__title" :style="{marginTop: '40px'}">限制充值时获取手机/银行卡相关信息</h3>
    <el-switch
      v-if="roleCheck('checkOnOff')"
      v-model="checkOnOff"
      active-color="#409eff"
      inactive-color="#dcdfe6"
      active-text="开启"
      inactive-text="关闭"
      active-value="1"
      inactive-value="0"
      @change="handleCheckChange">
    </el-switch>
    <hr/>
    <h3 class="regiestManage-container__title" :style="{marginTop: '40px'}">客服系统切换</h3>
    <el-radio-group v-model="csKey" size="medium">
      <el-radio-button :label='1' value="1">livechat客服系统</el-radio-button>
      <el-radio-button :label='2' value="2">智齿客服系统</el-radio-button>
    </el-radio-group>
    <div style="margin-top: 20px;">
      <el-button type="primary" size="medium" @click="doSave({action: 'saveCs'})">保存</el-button>
    </div>
  </div>
</template>

<script>


import { form, grid, factory } from '@/build';
import {
  registerOnOffStatus, registerChangeOnOffStatus, registerConfig, registerChangeConfig, checkOnOffStatus,
  customerServiceApi,customerServiceGetApi,
} from '@/services/api/system';

export default {
  name: 'registration-management',
  mixins: [form, grid, factory],
  data() {
    return {
      rules: {
        minutes: [
          { required: true, message: '时间不能为空', trigger: 'blur' },
          { validator: factory.getValidator('positiveInteger'), trigger: 'blur' },
        ],
        minutesCount: [
          { required: true, message: '分钟注册账户数量不能为空', trigger: 'blur' },
          { validator: factory.getValidator('positiveInteger'), trigger: 'blur' },
        ],
        dayCount: [
          { required: true, message: '天注册账户数量不能为空', trigger: 'blur' },
          { validator: factory.getValidator('positiveInteger'), trigger: 'blur' },
        ],
      },
      onOff: 0,
      checkOnOff: 0,
      form: {
        minutes: null,
        minutesCount: null,
        dayCount: null,
      },
      csKey: 1,
      //  error: '',

    };
  },
  methods: {
    onSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.minutes > 1440) {
            this.$message({
              type: 'error',
              message: '时间不能超过1440分钟（1天）',
            });
            return;
          }
          if (this.form.dayCount <= this.form.minutesCount) {
            // this.error = '天注册账户数量必须大于分钟注册账户数量';
            this.$message({
              type: 'error',
              message: '天注册账户数量必须大于分钟注册账户数量',
            });
            return;
          }
          this.doSave({ action: 'saveForm' });
        }
      });
    },
    handleChange(val) { // 开关按钮变化
      this.onOff = val;
      this.doGet({ action: 'changeOnOffStatus' });
    },
    handleCheckChange(val) {
      this.checkOnOff = val;
      this.doGet({ action: 'changeCheckOnOffStatus' });
    },
  },
  created() {
  },
  mounted() {
    this.bindGet(registerOnOffStatus, '', {
      callback: ([result, data]) => {
        if (result) {
          if (data) {
            this.onOff = data.onOff;
            this.checkOnOff = data.checkedOnOff;
          } else {
            this.$message({
              message: data.message,
              type: 'error',
            });
          }
        }
      },
    });
    this.bindGet(registerConfig, 'form', {
      action: 'getForm',
      format: (data) => {
        this.form = data;
        return data;
      },
    });
    this.bindGet(customerServiceGetApi, 'csKey',{
      format: (data) => {
        return data ? data : 1;
      }
    });
    this.getAll();
    this.bindSave(registerChangeConfig, 'saveForm', 'form', {
      afterSuccess: ([result]) => {
        if (result) {
          this.doGet({ action: 'getForm' });
        }
      },
    });
    this.bindGet(registerChangeOnOffStatus, '', {
      action: 'changeOnOffStatus',
      sendingData: 'onOff',
      beforeSend: data => ({
        onOff: this.onOff,
      }),
      callback: ([result, data]) => {
        if (result) {
          if (this.onOff == 0) {
            this.$message({
              type: 'success',
              message: '关闭成功！',
            });
          } else {
            this.$message({
              type: 'success',
              message: '开启成功！',
            });
          }
        }
      },
    });

    // 查询校验的状态
    // this.bindGet(getCheckOnOffStatus, '', {
    //   action: 'getCheckOnOffStatus',
    //   callback: ([result, data]) => {
    //     if(result) {
    //
    //     }
    //   }
    // })

    // 修改充值和体验的校验
    this.bindGet(checkOnOffStatus, '', {
      action: 'changeCheckOnOffStatus',
      sendingData: 'checkOnOff',
      beforeSend: data => ({
        onOff: this.checkOnOff,
      }),
      callback: ([result, data]) => {
        if (result) {
          if (this.checkOnOff == 0) {
            this.$message({
              type: 'success',
              message: '关闭成功！',
            });
          } else {
            this.$message({
              type: 'success',
              message: '开启成功！',
            });
          }
        }
      },
    });
    this.bindSave(customerServiceApi, 'saveCs', '', {
      beforeSend: () => {
        return { key: this.csKey };
      },
      afterSuccess: ([result]) => {
        if (result) {
          this.doGet({ action: 'getForm' });
        }
      },
    });
  },

};
</script>
<style scoped lang="scss">
.regiestManage-container{
  padding-left:100px;padding-top:40px;
  .el-switch{
    margin:10px 0 40px 0
  }
  .el-form{
    margin-bottom: 50px;
  }

  .el-form-item{
    display: flex;width:100%;
  }
}
/deep/.el-input{
  width:300px;
  margin-right:10px
}
/deep/.el-form-item .el-form-item__label{
  width:10em;
  text-align: left;
}

</style>
